<template>
  <div id="add_cate_app">
    <el-dialog :title="form.id?'修改商品分类':'添加商品分类'" :visible.sync="isShow.flag" width="50%">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="上级分类" prop="id">
          <el-select v-model="form.pid" placeholder="请选择活动区域">
            <el-option :label="'一级分类'" :value="0">一级分类</el-option>
            <el-option :label="cate.catename" :value="cate.id" v-for="cate in cateList" :key="cate.id">{{ cate.catename }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="form.catename"></el-input>
        </el-form-item>
        <el-form-item label="分类图片" v-if="form.pid !== 0">
          <el-upload
            class="avatar-uploader"
            action="#"
            :on-change="change_img"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods:{
      setData(obj){
        this.form = {...obj}
        this.imageUrl = this.$static_url+this.form.img
      },
      change_img(file){
          //获取图片对象 upload组件自带 on-change
           
          this.form.img = file.raw
      },
      submit(){
          console.log("sm")
          var url = "/cateadd" 
          if(this.form.id){
            url="/cateedit"
          }
          //构建formData实例
          var formData = new FormData()
          //提交请求
          for(let obj in this.form){
              formData.append(obj,this.form[obj])
          }

          this.$axios.post(url,formData).then(
            res=>{
              if(res.code===200){
                //重置表单
                this.form = {
                    pid: "",
                    catename: "",
                    status: "",
                    img: ""
                }
                //关闭模态框
                this.isShow.flag = false
                //刷新页面
                this.$emit("reload")
                //弹出提示
                this.$message({
                  type: "success",
                  message: "添加成功"
                })
              }
            }
          )
      }
  },  
  props: ["isShow","cateList"],
  data() {
    return {
      form: {
          pid: "",
          catename: "",
          status: "",
          img: ""
      },
      imageUrl: '',
      rules: {
          id: {required: true,message: "商品分类不可以为空", trigger: "blur"},
          catename: {required: true,message: "商品分类名称不可以为空", trigger: "blur"},
          status: {required: true,message: "商品分类状态不可以为空", trigger: "blur"}
      }
    };
  },
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>